<template lang="html">
  <div class="activityBox">
    <el-row class="bg-white">
      <el-col :span="2" >
        <div class="activityList active" @click="show">
          营销工具
          <span class="gray">
            <b class="green" style="font-weight:normal;" @click.stop="changePath"></b>
            {{$store.state.activity.gift.parentTitle}}
          </span>
        </div>
      </el-col>
    </el-row>
      <ul class="toolBox" v-if="$store.state.activity.gift.showType1">
        <li @click="pathTo(1)">
          <span class="toolLeft">
            <img src="static/img/songli.png" alt="">
          </span>
          <span class="toolRight">
            <p class="title">拼团送礼</p>
            <p class="txt">送产品、返现、送优惠券</p>
          </span>
        </li>
        <!-- <li @click="pathTo(2)">
          <span class="toolLeft">
            <img src="static/img/songli.png" alt="">
          </span>
          <span class="toolRight">
            <p class="title">拼团抽奖</p>
            <p class="txt">拼团得抽奖码，抽取超值产品</p>
          </span>
        </li>
        <li @click="pathTo(3)">
          <span class="toolLeft">
            <img src="static/img/songli.png" alt="">
          </span>
          <span class="toolRight">
            <p class="title">积分宝</p>
            <p class="txt">分享海报，朋友扫码得积分</p>
          </span>
        </li> -->
      </ul>
      <el-row>
        <router-view> </router-view>
      </el-row>
  </div>
</template>

<script>
export default {
  data(){
    return {
    }
  },
  methods:{
    changePath:function (){
      this.$store.dispatch('activityCloseType',{parentName:'gift',typeName:'showType1'});
      this.$store.dispatch('activityShowType',{parentName:'gift',typeName:'showType2'});
      this.$router.push({path:'/activity/gift/give'});
    },
    pathTo:function (n){
      this.$store.dispatch('activityCloseType',{parentName:'gift',typeName:'showType1'});
      this.$store.dispatch('activityShowType',{parentName:'gift',typeName:'showType2'});
      switch (n) {
        case 1:
          this.$router.push({path:'/activity/gift/give'});
          break;
        case 2:
          this.$router.push({path:'/activity/extraction'});
          break;
        case 3:
          this.$router.push({path:'/activity/integral'});
          break;
        default:
      }

    },
    show:function (){
      this.$store.dispatch('activityShowType',{parentName:'gift',typeName:'showType1'});
      this.$store.dispatch('activityChangeTitle',{parentName:'gift',titleName:'parentTitle',title:''});
      this.$router.push({path:'/activity'});
    }
  },
  watch:{
    $route:function (){
      var that = this;
      switch (that.$route.path) {
        case '/activity/gift':
          this.$store.dispatch('activityChangeTitle',{parentName:'gift',titleName:'parentTitle',title:'/拼团送礼'});
          break;
        case '/activity':
          this.$store.dispatch('activityShowType',{parentName:'gift',typeName:'showType1'});
          break;
        default:
      }
    }
  },

}
</script>

<style lang="Sass">
  .activityBox{ height: 100%; background: #F7F8FC;

    .activityList{height: 40px; position: relative; line-height: 40px; width: 80px;
       box-sizing: border-box; margin: 0 auto; cursor: pointer;
       span{position: absolute; left:85px; top:0;  width: 500px; text-align: left;}
     }
    .activityList:hover{border-bottom: 4px solid #13CE66;}
    .active{border-bottom: 4px solid #13CE66;}

    .toolBox{width: 100%; list-style: none; overflow: hidden; margin-top: 10px;
      li{width: 220px; height: 60px; float: left; margin-left: 10px; display: flex; background: #fff;
        border-radius: 8px;
        .toolLeft{display: inline-block; flex:0 0 50px; margin-right: 10px; height: 50px; padding-top: 10px; padding-left: 5px;}
        .toolRight{display: inline-block; flex: 1; padding-top: 5px;
          p{font-size: 13px; text-align: left;}
          .title{color: #333; padding-top: 5px;}
          .txt{color: #999;}
        }
      }
    }
  }
  .bg-white{background: #fff;}
</style>
